import React from 'react';
import { Handle, Position } from '@xyflow/react';
import { Box, Typography, IconButton, Chip } from '@mui/material';
import { PlayCircle as PlayCircleIcon } from '@mui/icons-material';
import { NodeData, NODE_TYPES } from './NodeTypes';

interface FeatureSelectionNodeProps {
  id: string;
  data: NodeData;
  selected: boolean;
}

// 特征选择节点组件
const FeatureSelectionNode: React.FC<FeatureSelectionNodeProps> = ({ id, data, selected }) => {
  // 节点颜色
  const getNodeColor = () => {
    return '#FF9800'; // 橙色
  };

  const borderColor = getNodeColor();
  const bgColor = selected ? `${borderColor}22` : '#fff';

  // 获取选择方法
  const getMethodName = () => {
    const method = data.params?.feature_selection_method || '';
    
    switch(method) {
      case 'variance': return '方差过滤';
      case 'correlation': return '相关性过滤';
      case 'chi2': return '卡方检验';
      case 'f_test': return 'F检验';
      case 'mutual_info': return '互信息';
      default: return '未指定';
    }
  };

  // 获取选中的特征数量
  const getSelectedFeatureCount = () => {
    if (data.lastExecutionResult?.selected_features) {
      return data.lastExecutionResult.selected_features.length;
    }
    return null;
  };

  const methodName = getMethodName();
  const selectedFeatureCount = getSelectedFeatureCount();

  return (
    <Box
      sx={{
        padding: 1.5,
        borderRadius: 2,
        background: bgColor,
        minWidth: 150,
        textAlign: 'center',
        fontSize: '14px',
        color: '#333',
        border: `2px solid ${borderColor}`,
        boxShadow: selected
          ? `0 0 10px ${borderColor}66`
          : '0 2px 8px rgba(0,0,0,0.1)',
        transition: 'all 0.3s ease',
        '&:hover': {
          boxShadow: `0 0 15px ${borderColor}44`,
          transform: 'translateY(-2px)',
        },
        position: 'relative',
      }}
    >
      {/* 节点标题 */}
      <Typography
        component="div"
        sx={{
          fontWeight: 600,
          mb: 0.5,
          color: '#333',
          whiteSpace: 'nowrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
        }}
      >
        {data.label || '特征选择'}
      </Typography>
      
      {/* 节点类型标签 */}
      <Typography
        variant="caption"
        component="div"
        sx={{
          opacity: 0.7,
          mb: 1,
          fontSize: '0.7rem',
        }}
      >
        {methodName}
      </Typography>
      
      {/* 显示已选特征数量 */}
      {selectedFeatureCount !== null && (
        <Chip
          label={`已选 ${selectedFeatureCount} 个特征`}
          size="small"
          sx={{
            fontSize: '0.7rem',
            height: 'auto',
            py: 0.5,
            backgroundColor: '#fff3e0',
            color: '#f57c00',
            mb: 1,
          }}
        />
      )}
      
      {/* 执行图标 */}
      <IconButton
        size="small"
        sx={{
          position: 'absolute',
          top: -12,
          right: -12,
          backgroundColor: '#fff',
          border: `1px solid ${borderColor}`,
          '&:hover': {
            backgroundColor: '#f0f0f0',
            transform: 'scale(1.1)',
          },
          transition: 'all 0.2s ease',
          boxShadow: '0 2px 5px rgba(0,0,0,0.1)',
        }}
        onClick={(e) => {
          e.stopPropagation();
          const event = new CustomEvent('execute-node', { detail: { nodeId: id } });
          window.dispatchEvent(event);
        }}
      >
        <PlayCircleIcon fontSize="small" color="primary" />
      </IconButton>

      {/* 输入端口 */}
      <Handle
        type="target"
        position={Position.Top}
        style={{
          background: borderColor,
          width: '10px',
          height: '10px',
          border: '2px solid #fff',
        }}
      />

      {/* 输出端口 */}
      <Handle
        type="source"
        position={Position.Bottom}
        style={{
          background: borderColor,
          width: '10px',
          height: '10px',
          border: '2px solid #fff',
        }}
      />
    </Box>
  );
};

export default FeatureSelectionNode; 